import React from 'react'
import { useSelector,useDispatch } from 'react-redux'

const List = () => {
    const list = useSelector(state=>state.list);
    const dispatch = useDispatch();
    const del = (index) => {
        dispatch({type:'del_item', index:index})
    }
    return (
        <div>
            <h2 style={{margin: '10px 30px'}}>代办事项：{list.length}</h2>
            <ul>
                {
                    list.map((val,index) => <li key={index}>
                        <span style={{display: 'inline-block', width: '100px'}}>{val}</span>
                        <button onClick={()=> del(index)}>删除</button>
                    </li>)
                }
            </ul>
        </div>
    )
}

export default List
